<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<meta name="Keywords" content="" />
		<meta name="Description" content="" />
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css" />
		<link rel="stylesheet" type="text/css" href="css/classify.css" />
		<link rel="stylesheet" type="text/css" href="css/find.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
	</head>

	<body>
		<div class="web">

			<!--头部S-->
			<!--<index_header>-->
			<!--<component :is="header_left" solt="left"></component>
				<component solt="mid"></component>
				<component solt="right"></component>-->
			<!--</index_header>-->
			<component :is="cur_header"></component>
			<!--头部E-->
			<component :is="cur_page"></component>
			<all_footer></all_footer>
		</div>
		<template id="footer">
			<!--尾部S-->
			<footer>
				<ul class="clear_fix">
					<li class="fl">
						<a @click="click('index','index_header')">
							<i class="iconfont icon-iconfontshouye my_icon"></i>
							<p>首页</p>
						</a>
					</li>
					<li class="fl">
						<a @click="click('classify','classify_header')">
							<i class="iconfont icon-fenlei my_icon"></i>
							<p>分类</p>
						</a>
					</li>
					<li class="fl">
						<a @click="click('find','find_header')">
							<i class="iconfont icon-faxian my_icon"></i>
							<p>发现</p>
						</a>
					</li>
					<li class="fl">
						<a @click="click('my','my_header')">
							<i class="iconfont icon-rentou  my_icon"></i>
							<p>我的</p>
						</a>
					</li>
				</ul>
			</footer>
			<!--尾部E-->
		</template>
		<!--分类头部S-->
		<template id="classify_header">
			<!--头部S-->
			<header class="clear_fix">
				<div class="warp">
					<div class="header_left fl">
						<button type="button" onclick="javascript:history.back(-1)">Back</button>
					</div>
					<div class="header_right fr">
						<select>
							<option value="">嗯哼</option>
							<option value="">大胆</option>
							<option value="">小泡芙</option>
						</select>
					</div>
					<div class="header_center ">
						<p>
							<a href="">分类</a>
						</p>
					</div>
				</div>

			</header>
			<!--头部E-->
		</template>
		<!--分类头部E-->
		<!--我的头部S-->
		<template id="my_header">
			<!--头部S-->
			<header class="clear_fix">
				<div class="warp">
					<div class="header_left fl">
						<button type="button" onclick="javascript:history.back(-1)">Back</button>
					</div>
					<div class="header_right fr">
						<select>
							<option value="">嗯哼</option>
							<option value="">大胆</option>
							<option value="">小泡芙</option>
						</select>
					</div>
					<div class="header_center ">
						<p>
							<a href="">我的</a>
						</p>
					</div>
				</div>

			</header>
			<!--头部E-->
		</template>
		<!--我的头部E-->
		<!--发现头部S-->
		<template id="find_header">
			<!--头部S-->
			<header class="clear_fix">
				<div class="warp">
					<div class="header_left fl">
						<button type="button" onclick="javascript:history.back(-1)">Back</button>
					</div>
					<div class="header_right fr">
						<select>
							<option value="">嗯哼</option>
							<option value="">大胆</option>
							<option value="">小泡芙</option>
						</select>
					</div>
					<div class="header_center ">
						<p>
							<a href="">发现</a>
						</p>
					</div>
				</div>

			</header>
			<!--头部E-->
		</template>
		<!--发现头部E-->
		<!--首页头部S-->
		<template id="index_header">
			<!--头部S-->
			<header class="clear_fix">
				<div class="logo fl">
					<a href="">
						<img src="img/logo.png" />
					</a>
				</div>

				<div class="search fl">
					<form action="">
						<input type="" placeholder="请输入商品名称" />
						<button></button>
					</form>
				</div>
				<div class="select fl">
					<select>
						<option value="">嗯哼</option>
						<option value="">大胆</option>
						<option value="">小泡芙</option>
					</select>
				</div>
			</header>
			<!--头部E-->
		</template>
		<!--分类头部E-->
		<!--首页S-->
		<template id="index">
			<section>
				<div class="kv">
					<img src="img/index/banner.jpg" />
				</div>
				<div class="content">
					<div class="public_title">
						<p>
							<i class="iconfont icon-xinghui"></i>优惠团购
							<span>更多<i class="iconfont icon-arrow-circle-o-right"></i></span>
						</p>
					</div>
					<div class="team_shop">
						<div class="top clear_fix">
							<div class="left fl">
								<img src="img/index/discounts1.jpg" />
							</div>
							<div class="right fr">
								<img src="img/index/discounts2.jpg" />
							</div>
						</div>
						<div class="bottom clear_fix">
							<div class="left fl">
								<img src="img/index/discounts3.jpg" />
							</div>
							<div class="right fr">
								<img src="img/index/discounts4.jpg" />
							</div>
						</div>
					</div>
					<div class="public_title">
						<p>
							<i class="iconfont icon-xin"></i>优惠团购
							<span>更多<i class="iconfont icon-arrow-circle-o-right"></i></span>
						</p>
					</div>
					<div class="store">
						<div class="store_top clear_fix">
							<div class="store_img fl">
								<img src="img/index/shop_wansui.jpg" />
							</div>
							<div class="store_introduce fr">
								<p>万岁寿司（正佳店）<span>&lt;100m</span></p>
								<p>[100店通用]&nbsp;双人套餐</p>
								<p>￥88.00<span>已售1000</span></p>
							</div>
						</div>
						<div class="store_bottom clear_fix">
							<div class="store_img fl">
								<img src="img/index/shop_wansui.jpg" />
							</div>
							<div class="store_introduce fr">
								<p>万岁寿司（正佳店）<span>&lt;100m</span></p>
								<p>[100店通用]&nbsp;双人套餐</p>
								<p>￥88.00<span>已售1000</span></p>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!--内容E-->
		</template>
		<!--首页E-->
		<!--发现S-->
		<template id="find">
			<section class="clear_fix">
				<div class="public_search">
					<form action="">
						<input type="" placeholder="请输入商品名称" />
						<button></button>
					</form>
				</div>
				<div class="title">
					<p>大家都在搜</p>
					<table border="1" cellspacing="0">
						<tr>
							<td>寿司</td>
							<td>羽毛球</td>
							<td>火锅</td>
							<td>游泳馆</td>
						</tr>
						<tr>
							<td>电影</td>
							<td>周黑鸭</td>
							<td>KTV</td>
							<td>肯德基</td>
						</tr>
					</table>
				</div>
				<div class="t_shop clear_fix">
					<div class="t_shop_head">
						<p><i class="iconfont icon-huo"></i>热门搜索<span>更多<i class="iconfont icon-arrow-circle-o-right"></i></span></p>
					</div>
					<div class="table_img">
						<table border="1">
							<tr>
								<td colspan="2" rowspan="2">
									<img src="img/discover/hot_search (4).png" />
								</td>

								<td colspan="2">
									<img src="img/discover/hot_search (3).png" />
								</td>

							</tr>
							<tr>

								<td width="c(195px)">
									<img src="img/discover/hot_search (2).png" />
								</td>
								<td width="c(211px)">
									<img src="img/discover/hot_search (1).png" />
								</td>
							</tr>
						</table>
					</div>
					<div class="t_shop clear_fix">
						<div class="t_shop_head">
							<p><i class="iconfont icon-huo"></i>推荐搜索<span>更多<i class="iconfont icon-arrow-circle-o-right"></i></span></p>
						</div>
						<div class="hot_img  clear_fix">
							<div class="left fl">
								<img src="img/discover/recommend (3).png" />
							</div>
							<div class="center fl">
								<img src="img/discover/recommend (2).png" />
							</div>
							<div class="right fr">
								<img src="img/discover/recommend (1).png" />
							</div>
						</div>
					</div>

				</div>

			</section>
			<!--内容E-->
		</template>
		<template id="my">
			<!--内容	S-->
			<section class="clear_fix content">
				<div class="login clear_fix">
					<div class="login_img fl"></div>
					<div class="login_text fl">
						<p>
							<a href="">点击登录</a>
						</p>
						<p>
							<a href="">常居地未设置</a>
						</p>
						<i class="iconfont icon-chuizi"></i>
					</div>
				</div>
				<div class="my_classify clear_fix">
					<div class="my_classify_left fl">
						<i class="iconfont icon-yun"></i>
						<p>
							<a href="">我的点评</a>
						</p>
					</div>
					<div class="my_classify_center fl">
						<i class="iconfont icon-gray-star"></i>
						<p>
							<a href="">我的点评</a>
						</p>
					</div>
					<div class="my_classify_right fl">
						<i class="iconfont icon-gouwuquan"></i>
						<p>
							<a href="">我的点评</a>
						</p>
					</div>
				</div>

				<div class="pulic_bar">
					<p><i class="iconfont icon-icon"></i>我的钱包<span>更多<i class="iconfont icon-arrow-circle-o-right"></i></span></p>
				</div>
				<div class="pulic_bar">
					<p><i class="iconfont icon-yun"></i>待点评<span>更多<i class="iconfont icon-arrow-circle-o-right"></i></span></p>
				</div>
				<div class="pulic_bar">
					<p><i class="iconfont icon-diqiu"></i>找好友<span>更多<i class="iconfont icon-arrow-circle-o-right"></i></span></p>
				</div>
				<div class="pulic_bar">
					<p><i class="iconfont icon-wodezuji"></i>我的足迹<span>更多<i class="iconfont icon-arrow-circle-o-right"></i></span></p>
				</div>
				<div class="pulic_bar">
					<p><i class="iconfont icon-chuizi"></i>设置<span>更多<i class="iconfont icon-arrow-circle-o-right"></i></span></p>
				</div>
				<div class="pulic_bar">
					<p><i class="iconfont icon-dianhua"></i>联系<span>更多<i class="iconfont icon-arrow-circle-o-right"></i></span></p>
				</div>
				<div class="button">
					<button><a href="">退出</a></button><button><a href="">注销</a></button>
				</div>
			</section>
			<!--内容	E-->
		</template>
		<template id="classify">
			<div>

				<!--分类页插槽S-->
				<slot name="classify"></slot>
				<!--分类页插槽E-->
				<!--内容S-->
				<section class="clear_fix">
					<div class="classify_all clear_fix">
						<div class="classify_all_food fl">
							<div class="classify_all_img">
								<img src="img/classify/classify (1).png" />
							</div>
							<p>美食</p>
						</div>
						<div class="classify_all_food fl">
							<div class="classify_all_img">
								<img src="img/classify/classify (2).png" />
							</div>
							<p>电影</p>
						</div>
						<div class="classify_all_food fl">
							<div class="classify_all_img">
								<img src="img/classify/classify (3).png" />
							</div>
							<p>运动</p>
						</div>
						<div class="classify_all_food fl">
							<div class="classify_all_img">
								<img src="img/classify/classify (4).png" />
							</div>
							<p>唱歌</p>
						</div>

					</div>
					<div class="public_title clear_fix">
						<p>
							<i class="iconfont icon-xinghui"></i>优惠团购
							<span>更多<i class="iconfont icon-arrow-circle-o-right"></i></span>
						</p>
					</div>
					<div class="classify_type clear_fix">
						<div class="classify_type_img fl">
							<img src="img/classify/foods (1).png" />
						</div>
						<div class="classify_type_img fl">
							<img src="img/classify/foods (1).png" />
						</div>
						<div class="classify_type_img fl">
							<img src="img/classify/foods (1).png" />
						</div>
						<div class="classify_type_img fl">
							<img src="img/classify/foods (1).png" />
						</div>
					</div>
					<div class="public_title clear_fix">
						<p>
							<i class="iconfont icon-xinghui"></i>优惠团购
							<span>更多<i class="iconfont icon-arrow-circle-o-right"></i></span>
						</p>
					</div>
					<div class="classify_type clear_fix">
						<div class="classify_type_img fl">
							<img src="img/classify/foods (1).png" />
						</div>
						<div class="classify_type_img fl">
							<img src="img/classify/foods (1).png" />
						</div>
						<div class="classify_type_img fl">
							<img src="img/classify/foods (1).png" />
						</div>
						<div class="classify_type_img fl">
							<img src="img/classify/foods (1).png" />
						</div>
					</div>
					<div class="public_title clear_fix">
						<p>
							<i class="iconfont icon-xinghui"></i>优惠团购
							<span>更多<i class="iconfont icon-arrow-circle-o-right"></i></span>
						</p>
					</div>
					<div class="classify_type clear_fix">
						<div class="classify_type_img fl">
							<img src="img/classify/foods (1).png" />
						</div>
						<div class="classify_type_img fl">
							<img src="img/classify/foods (1).png" />
						</div>
						<div class="classify_type_img fl">
							<img src="img/classify/foods (1).png" />
						</div>
						<div class="classify_type_img fl">
							<img src="img/classify/foods (1).png" />
						</div>
					</div>
				</section>
				<!--内容E-->
			</div>
		</template>
	</body>
	<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		Vue.component("index_header",{
			template:"#index_header",
		})
		Vue.component("classify_header",{
			template:"#classify_header",
		})
		Vue.component("find_header",{
			template:"#find_header",
		})
		Vue.component("my_header",{
			template:"#my_header",
		})
		var vm = new Vue({
			el: ".web",
			data: {
				cur_page: "index",
				cur_header: "index_header",
			},
			components: {
				//footer
				all_footer: {
					template: "#footer",
					
					methods: {
						click: function(arr, brr) {
							vm.cur_page = arr;
							vm.cur_header = brr;
						}
					}
				},
				//首页组件
				index: {
					template: "#index"
				},
				index_header: {
					template: "#index_header"
				},
				//my页组件
				my: {
					template: "#my"
				},
				//find组件
				find: {
					template: "#find"
				},
				//classsify组件
				classify: {
					template: "#classify"
				},

			},
		})
	</script>

</html>